import { Button, Divider } from 'antd'

import Ellipsis from '@/components/Ellipsis'
import { formatDate, formatMoneyNum } from '@/utils/displayHelper'
import { ACCOMPANYING_PERIOD_ENUM, PCS_COMPANION_ORDER_STATUS_ENUM, PCS_COMPANION_PERIOD_ENUM } from '@/utils/enum'

import AccompanyingPlanDrawer from '../AccompanyingPlanDrawer'

import styles from './index.module.less'

const AccompanyingPlanCard = ({ detailData = {}, className }) => {
  const { status, orderDetail } = detailData
  const {
    companionComboName,
    price,
    companionComboContent,
    startDate,
    startPeriod,
    endDate,
    endPeriod,
    servicePeriod,
    totalAmount,
  } = orderDetail
  return (
    <div className={`${styles.accompanyingPlanCard} ${className}`}>
      <div className='flex justify-between'>
        <div>
          <div className={styles.name}>
            {companionComboName}
            <span
              className={styles.status}
              style={{ color: PCS_COMPANION_ORDER_STATUS_ENUM.getOption(status).tagColor }}
            >
              {PCS_COMPANION_ORDER_STATUS_ENUM.getText(status)}
            </span>
          </div>
          <Ellipsis className='mt4px' tooltip lines={1}>
            {companionComboContent}
          </Ellipsis>
          <div className={styles.time}>
            {formatDate(startDate)} {PCS_COMPANION_PERIOD_ENUM.getText(startPeriod)} ~ {formatDate(endDate) || ''}{' '}
            {PCS_COMPANION_PERIOD_ENUM.getText(endPeriod) || ''}
          </div>
        </div>
        <div className={styles.right}>
          <span className='c-money'>{formatMoneyNum(price || 0)}</span>
          <div className='mt10px'> x {detailData.orderDetail.serviceDays}</div>
          <div className='mt10px'>{ACCOMPANYING_PERIOD_ENUM.getText(servicePeriod)}</div>
        </div>
      </div>
      <Divider size='small' />
      <div className='flex justify-between'>
        <div className={styles.total}>
          共计：<span className='c-money'>{formatMoneyNum(totalAmount || 0)}</span>
        </div>
        <Button
          type='link'
          onClick={() => {
            AccompanyingPlanDrawer.PromiseThen({ isDetail: true, detailData })
          }}
        >
          查看详情
        </Button>
      </div>
    </div>
  )
}

export default AccompanyingPlanCard
